<template>
<div class="containerWrap">
  <el-container class="container">
    <el-main class="rightMain">
      <el-container>
        <el-header class="dzy-main-header">
          <div class="btn-group-el">
            <btn-group :currentSelectedData="currentSelectedData" @btnClickCallback="btnClickCallback"></btn-group>
          </div>
          <div class="dzy-custom-search-box">
            <div>
              案件类型：
              <el-select size="small" filterable clearable  v-model="queryData.type" placeholder="请选择">
                <el-option v-for="(item, index) in caseTypeOption" :key="index" :value="item.value" :label="item.name"></el-option>
              </el-select>
            </div>
            <div>
              案件来源：
              <el-input size="small" placeholder="案件来源" v-model="queryData.comefrom" clearable class="dzy-custom-input"></el-input>
            </div>
            <div>创建人：
              <el-input size="small" placeholder="登记人" v-model="queryData.registrar" clearable class="dzy-custom-input"></el-input>
            </div>
            <div>委托人：
              <el-input size="small" placeholder="委托人" v-model="queryData.clientName" clearable class="dzy-custom-input"></el-input>
            </div>
            <div>创建时间：
              <el-date-picker size="small"
                  style="width:160px"
                  v-model="queryData.startTime"
                  type="datetime"
                  value-format="timestamp"
                  placeholder="选择时间">
              </el-date-picker>
              ~
              <el-date-picker size="small"
                  style="width:160px"
                  v-model="queryData.endTime"
                  type="datetime"
                  value-format="timestamp"
                  placeholder="选择时间">
              </el-date-picker>
            </div>
            <div>
              <el-button size="small" @click="searchHandleClick" type="primary" icon="el-icon-search">查询</el-button>
            </div>
          </div>
        </el-header>
        <el-main class="tableMain">
          <app-table :page-data="pageData"
            :table-columns="tableColumns"
            v-on:currentChange="handleCurrentChange"
            v-on:handleCheckedRows="handleCheckedRows">
          </app-table>
        </el-main>
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :before-close="cancel" :close-on-click-modal="false" class="dialog_style">
          <div class="formWrapper">
            <el-form class="formMain" :model="formData"
              :rules="rules"
              ref="formData"
              label-width="100px"
              size="small">
<!-- 委托人 -->
              <el-divider content-position="left">委托人</el-divider>
              <el-row :gutter="15">
                <el-col :span="12">
                  <el-form-item label="姓名：" prop="name">
                    <el-input v-model="clientData.name" placeholder="姓名"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="性别：" prop="sex">
                    <el-select filterable style="width:100%" v-model="clientData.sex" placeholder="性别">
                      <el-option v-for="(item, index) in sexOption" :key="index" :value="item.value" :label="item.name"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="证件号码：" prop="idCardNumber" @blur="idCardNumberBlur">
                    <el-input v-model="clientData.idCardNumber" placeholder="证件号码"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="手机号：" prop="phone">
                    <el-input v-model="clientData.phone" placeholder="手机号"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="工作单位：" prop="workUnit">
                    <el-input v-model="clientData.workUnit" placeholder="工作单位"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="备注：" prop="remark">
                    <el-input v-model="clientData.remark" type="textarea" :rows="5" placeholder="备注"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
<!-- 案件详情 -->
              <el-divider content-position="left">案件详情</el-divider>
              <el-row :gutter="15">
                <el-col :span="12">
                  <el-form-item label="案件类型：" prop="type">
                    <el-select filterable style="width:100%" v-model="caseData.type" placeholder="案件类型">
                      <el-option v-for="(item, index) in caseTypeOption" :key="index" :value="item.value" :label="item.name"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="案件来源：" prop="comefrom">
                    <el-input v-model="caseData.comefrom" placeholder="案件来源"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="案件描述：" prop="description">
                    <el-input v-model="caseData.description" type="textarea" :rows="5" placeholder="描述"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="受理律师：" prop="undertakeLawyerId">
                    <el-select filterable style="width:100%" v-model="caseData.undertakeLawyerId" placeholder="受理律师">
                      <el-option v-for="(item, index) in lawyerList" :key="index" :value="item.id" :label="item.name"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="利益方：" prop="interestParty">
                    <el-select filterable style="width:100%" v-model="caseData.interestParty" placeholder="利益方">
                      <el-option value="0" label="原告"></el-option>
                      <el-option value="1" label="被告"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="应收金额：" prop="supposeReceived">
                    <el-input v-model="caseData.supposeReceived" placeholder="预收金额"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="实收金额：" prop="actualReceived">
                    <el-input v-model="caseData.actualReceived" placeholder="实收金额"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="收案审批表：" prop="picture">
                    <app-load-file v-model="acceptApproval.file" :type="acceptApprovalType" v-on:delImgUrl="delFile"></app-load-file>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="收费凭证：" prop="picture">
                    <app-load-file v-model="chargeVoucher.file" :type="chargeVoucherType" v-on:delImgUrl="delFile"></app-load-file>
                  </el-form-item>
                </el-col>
              </el-row>
<!-- 原告 -->
              <el-divider content-position="left">原告</el-divider>
              <!-- 原告个人列表 -->
              <el-row :gutter="15">
                <el-col :span="12">
                  <el-button size="small" @click="plaintiffSeleted('个人')" type="primary">添加个人</el-button>
                </el-col>
              </el-row>
              <el-row>
                <el-table
                  :data="plaintiffPersonTableData"
                  @row-click="plaintiffPersonRowSelect"
                  :row-class-name="tableRowClassName"
                  style="width: 100%">
                  <el-table-column
                    v-for="(item, index) in plaintiffPersonTableColum"
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width">
                  </el-table-column>
                </el-table>
              </el-row>
              <!-- 原告单位列表 -->
              <el-row>
                <el-col :span="12">
                  <el-button size="small" @click="plaintiffSeleted('单位')" type="primary">添加单位</el-button>
                </el-col>
              </el-row>
              <el-row>
                <el-table
                  :data="plaintiffCompanyTableData"
                  @row-click="plaintiffCompanyRowSelect"
                  :row-class-name="tableRowClassName"
                  style="width: 100%">
                  <el-table-column
                    v-for="(item, index) in plaintiffCompanyTableColum"
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width">
                  </el-table-column>
                </el-table>
              </el-row>
<!-- 被告 -->
              <el-divider content-position="left">被告</el-divider>
              <!-- 被告个人列表 -->
              <el-row :gutter="15">
                <el-col :span="12">
                  <el-button size="small" @click="defendantSeleted('个人')" type="primary">添加个人</el-button>
                </el-col>
              </el-row>
              <el-row>
                <el-table
                  :data="defendantPersonTableData"
                  @row-click="defendantPersonRowSelect"
                  :row-class-name="tableRowClassName"
                  style="width: 100%">
                  <el-table-column
                    v-for="(item, index) in defendantPersonTableColum"
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width">
                  </el-table-column>
                </el-table>
              </el-row>
              <!-- 被告单位列表 -->
              <el-row>
                <el-col :span="12">
                  <el-button size="small" @click="defendantSeleted('单位')" type="primary">添加单位</el-button>
                </el-col>
              </el-row>
              <el-row>
                <el-table
                  :data="defendantCompanyTableData"
                  @row-click="defendantCompanyRowSelect"
                  :row-class-name="tableRowClassName"
                  style="width: 100%">
                  <el-table-column
                    v-for="(item, index) in defendantCompanyTableColum"
                    :key="index"
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width">
                  </el-table-column>
                </el-table>
              </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button size="small" @click="cancel" v-if="showOnly">取 消</el-button>
              <el-button size="small" type="primary" v-if="showOnly" @click="save">确定</el-button>
              <el-button size="small" type="primary" v-if="receiveShow" @click="save('handle')">转 案</el-button>
            </div>
          </div>
        </el-dialog>
<!-- 添加原告弹窗 -->
        <el-dialog
          :title="defendantTitle"
          :visible.sync="plaintiffDialogFormVisible"
          :before-close="defendantDialogCancel"
          :close-on-click-modal="false"
          class="dialog_style">
          <el-form label-width="100px" size="small">
            <el-divider content-position="left">{{dividerTitle}}</el-divider>
            <el-row :gutter="15">
              <!-- 原告个人块 -->
              <div v-if="plaintiffPersonVisiable">
                <el-col :span="12">
                  <el-form-item label="姓名：" prop="name">
                    <el-input v-model="plaintiffData.name" placeholder="姓名"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="是否委托人：" prop="sex">
                    <el-select filterable style="width:100%" v-model="plaintiffData.isClient" placeholder="请选择">
                      <el-option value="0" label="是"></el-option>
                      <el-option value="1" label="否"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="性别：" prop="sex">
                    <el-select filterable style="width:100%" v-model="plaintiffData.sex" placeholder="性别">
                      <el-option v-for="(item, index) in sexOption" :key="index" :value="item.value" :label="item.name"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="民族：" prop="sex">
                    <el-select filterable style="width:100%" v-model="plaintiffData.nation" placeholder="民族">
                      <el-option v-for="(item, index) in nationOption" :key="index" :value="item.value" :label="item.name"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="身份号码：" prop="idCardNumber">
                    <el-input v-model="plaintiffData.idCardNumber" placeholder="身份号码"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="户籍地址：" prop="householdAddress">
                    <el-input v-model="plaintiffData.householdAddress" placeholder="户籍地址"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="现住地址：" prop="liveAddress">
                    <el-input v-model="plaintiffData.liveAddress" placeholder="现住地址"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="联系方式：" prop="phone">
                    <el-input v-model="plaintiffData.phone" placeholder="联系方式"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="工作单位：" prop="workUnit">
                    <el-input v-model="plaintiffData.workUnit" placeholder="工作单位"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="备注：" prop="remark">
                    <el-input v-model="plaintiffData.remark" type="textarea" :rows="5" placeholder="备注"></el-input>
                  </el-form-item>
                </el-col>
              </div>
              <!-- 原告单位块 -->
              <div v-if="plaintiffCompanyVisiable">
                <el-col :span="12">
                  <el-form-item label="单位名称：" prop="name">
                    <el-input v-model="plaintiffData.name" placeholder="单位名称"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="是否委托人：" prop="sex">
                    <el-select filterable style="width:100%" v-model="plaintiffData.isClient" placeholder="请选择">
                      <el-option value="1" label="是"></el-option>
                      <el-option value="0" label="否"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="统一社会信用代码：" prop="socialCode">
                    <el-input v-model="plaintiffData.socialCode" placeholder="统一社会信用代码"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="所属行业：" prop="industry">
                    <el-input v-model="plaintiffData.industry" placeholder="所属行业"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="公司地址：" prop="workAddress">
                    <el-input v-model="plaintiffData.workAddress" placeholder="公司地址"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="负责人姓名：" prop="responsibility">
                    <el-input v-model="plaintiffData.responsibility" placeholder="负责人姓名"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="联系电话：" prop="phone">
                    <el-input v-model="plaintiffData.phone" placeholder="联系电话"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="备注：" prop="remark">
                    <el-input v-model="plaintiffData.remark" type="textarea" :rows="5" placeholder="备注"></el-input>
                  </el-form-item>
                </el-col>
              </div>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button size="small" v-if="showOnly" @click="defendantDialogCancel">取 消</el-button>
            <el-button size="small" v-if="showOnly" type="primary" @click="plaintiffSave">提 交</el-button>
          </div>
        </el-dialog>
<!-- 添加被告弹窗 -->
        <el-dialog
          :title="defendantTitle"
          :visible.sync="defendantDialogFormVisible"
          :before-close="defendantDialogCancel"
          :close-on-click-modal="false"
          class="dialog_style">
          <el-form label-width="100px" size="small">
            <el-divider content-position="left">{{dividerTitle}}</el-divider>
            <el-row :gutter="15">
              <!-- 被告个人块 -->
              <div v-if="defendantPersonVisiable">
                <el-col :span="12">
                  <el-form-item label="姓名：" prop="name">
                    <el-input v-model="defendantData.name" placeholder="姓名"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="是否委托人：" prop="sex">
                    <el-select filterable style="width:100%" v-model="defendantData.isClient" placeholder="请选择">
                      <el-option value="1" label="是"></el-option>
                      <el-option value="0" label="否"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="性别：" prop="sex">
                    <el-select filterable style="width:100%" v-model="defendantData.sex" placeholder="性别">
                      <el-option v-for="(item, index) in sexOption" :key="index" :value="item.value" :label="item.name"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="民族：" prop="nation">
                    <el-select filterable style="width:100%" v-model="defendantData.nation" placeholder="民族">
                      <el-option v-for="(item, index) in nationOption" :key="index" :value="item.value" :label="item.name"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="身份号码：" prop="idCardNumber">
                    <el-input v-model="defendantData.idCardNumber" placeholder="身份号码"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="户籍地址：" prop="householdAddress">
                    <el-input v-model="defendantData.householdAddress" placeholder="户籍地址"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="现住地址：" prop="liveAddress">
                    <el-input v-model="defendantData.liveAddress" placeholder="现住地址"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="联系方式：" prop="phone">
                    <el-input v-model="defendantData.phone" placeholder="联系方式"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="工作单位：" prop="workDnit">
                    <el-input v-model="defendantData.workDnit" placeholder="工作单位"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="备注：" prop="remark">
                    <el-input v-model="defendantData.remark" type="textarea" :rows="5" placeholder="备注"></el-input>
                  </el-form-item>
                </el-col>
              </div>
              <!-- 被告单位块 -->
              <div v-if="defendantCompanyVisiable">
                <el-col :span="12">
                  <el-form-item label="单位名称：" prop="name">
                    <el-input v-model="defendantData.name" placeholder="单位名称"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="是否委托人：" prop="sex">
                    <el-select filterable style="width:100%" v-model="defendantData.isClient" placeholder="请选择">
                      <el-option value="1" label="是"></el-option>
                      <el-option value="0" label="否"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="统一社会信用代码：" prop="socialCode">
                    <el-input v-model="defendantData.socialCode" placeholder="统一社会信用代码"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="所属行业：" prop="industry">
                    <el-input v-model="defendantData.industry" placeholder="统一社会信用代码"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="公司地址：" prop="workAddress">
                    <el-input v-model="defendantData.workAddress" placeholder="公司地址"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="负责人姓名：" prop="responsibility">
                    <el-input v-model="defendantData.responsibility" placeholder="负责人姓名"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="联系电话：" prop="phone">
                    <el-input v-model="defendantData.phone" placeholder="联系电话"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="备注：" prop="remark">
                    <el-input v-model="defendantData.remark" type="textarea" :rows="5" placeholder="备注"></el-input>
                  </el-form-item>
                </el-col>
              </div>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button size="small" v-if="showOnly" @click="defendantDialogCancel">取 消</el-button>
            <el-button size="small" v-if="showOnly" type="primary" @click="defendantSave">提 交</el-button>
          </div>
        </el-dialog>
      </el-container>
    </el-main>
  </el-container>
</div>
</template>

<script>
import BtnGroup from '@/components/BtnGroup'
import AppTable from '@/components/AppTable'
import appLoadFile from '@/components/AppLoadFileCase'
import {
  putClient,
  getLawCase,
  putLawCase,
  delLawCase,
  getLawCaseDetail,
  putDefendantPersonReq,
  putDefendantUnit,
  putPlaintiffPersonReq,
  putPlaintiffCompany,
  getUserList,
  delAcceptApproval,
  delChargeVoucher,
  createDefendantUnit,
  postDefendantPerson,
  postPlaintiffPerson,
  postChargeVoucher,
  postAcceptApproval,
  postPlaintiffCompany} from '@/http/CaseApi'
import {getDictDataOption} from '@/utils/getDictDataOption'
export default {
  data () {
    return {
      dialogTitle: '',
      dividerTitle: '',
      defendantTitle: '',
      showOnly: false,
      receiveShow: false,
      rowSelected: false,
      dialogFormVisible: false,
      plaintiffCompanyVisiable: false,
      plaintiffPersonVisiable: false,
      defendantCompanyVisiable: false,
      defendantPersonVisiable: false,
      plaintiffDialogFormVisible: false,
      defendantDialogFormVisible: false,
      currentSelectedData: [],
      plaintiffPersonTableData: [],
      plaintiffPersonTableColum: [
        { label: '姓名', prop: 'name' }
      ],
      plaintiffCompanyTableData: [],
      plaintiffCompanyTableColum: [
        { label: '单位', prop: 'name' }
      ],
      defendantPersonTableData: [],
      defendantPersonTableColum: [
        { label: '姓名', prop: 'name' }
      ],
      defendantCompanyTableData: [],
      defendantCompanyTableColum: [
        { label: '单位', prop: 'name' }
      ],
      plaintiffData: {},
      defendantData: {},
      clientData: {},
      formData: {},
      caseData: {},
      fileList: [],
      pageData: {},
      queryData: {caseStatus: '1'},
      tableColumns: [
        { label: '案件类型', prop: 'type', formatter: this.typeFormatter },
        { label: '案件来源', prop: 'comefrom' },
        { label: '受理律师', prop: 'undertakeLawyerName' },
        { label: '委托人', prop: 'clientName' },
        { label: '登记人', prop: 'createByName' },
        { label: '创建时间', prop: 'createTime', formatter: this.formatDate },
        { label: '案件描述', prop: 'description' }
      ],
      rules: {},
      clientId: '',
      caseId: '',
      btnType: '',
      plaintiffTableName: '',
      defendantTableName: '',
      caseTypeOption: [],
      nationOption: [],
      sexOption: [],
      lawyerList: [],
      acceptApproval: {file: []},
      chargeVoucher: {file: []},
      acceptApprovalType: 'acceptApproval',
      chargeVoucherType: 'chargeVoucher',
      currentSelectedRowindex: 0
    }
  },
  components: {BtnGroup, AppTable, appLoadFile},
  mounted () {
    this.defPageData()
    this.getDeadLine()
    this.setDictOption()
  },
  methods: {
    setDictOption () {
      this.caseTypeOption = getDictDataOption('案件类型')
      this.nationOption = getDictDataOption('民族')
      this.sexOption = getDictDataOption('性别')
    },
    getDeadLine () {
      let arr = getDictDataOption('办案时效')
      let deadLine = ''
      for (let i = 0, len = arr.length; i < len; i++) {
        if (arr[i].name === '收案') {
          deadLine = arr[i].value
          break
        }
      }
      this.queryData.deadLine = parseInt(deadLine) * 24 * 3600 * 1000
      this.getTableData()
    },
    typeFormatter (row, column) {
      let option = getDictDataOption('案件类型')
      let name = ''
      for (let i = 0, len = option.length; i < len; i++) {
        if (option[i].value === row.type) {
          name = option[i].name
        }
      }
      return name
    },
    defPageData () {
      this.pageData = {
        'isPartyOrg': true,
        'offset': 0,
        'limit': 10,
        'items': []
      }
    },
    // 原告添加个人 单位方法
    plaintiffSeleted (type) {
      this.plaintiffData = {}
      this.dividerTitle = type
      this.plaintiffDialogFormVisible = true
      this.plaintiffPersonVisiable = type === '个人'
      this.putplaintiffPerson = this.plaintiffPersonVisiable
      this.defendantTitle = '添加原告'
      this.plaintiffTableName = type === '个人' ? 'plaintiffPersonTableData' : 'plaintiffCompanyTableData'
      this.plaintiffCompanyVisiable = !this.plaintiffPersonVisiable
    },
    // 被告添加个人 单位方法
    defendantSeleted (type) {
      this.defendantData = {}
      this.dividerTitle = type
      this.defendantDialogFormVisible = true
      this.defendantPersonVisiable = type === '个人'
      this.putDefendantPerson = this.defendantPersonVisiable
      this.defendantTitle = '添加被告'
      this.defendantTableName = type === '个人' ? 'defendantPersonTableData' : 'defendantCompanyTableData'
      this.defendantCompanyVisiable = !this.defendantPersonVisiable
    },
    idCardNumberBlur (val) {
      console.log(val)
    },
    tableRowClassName ({row, rowIndex}) {
      row.index = rowIndex
    },
    // 原告单位列表单行点击事件
    plaintiffCompanyRowSelect (row, column, event) {
      this.rowSelected = true
      this.currentSelectedRowindex = row.index
      this.putPlaintiffPerson = false
      this.plaintiffDialogFormVisible = true
      this.plaintiffCompanyVisiable = true
      this.plaintiffPersonVisiable = false
      this.plaintiffData = row
      this.defendantTitle = row.name
      this.dividerTitle = '单位'
    },
    // 原告个人列表单行点击事件
    plaintiffPersonRowSelect (row, column, event) {
      this.rowSelected = true
      this.currentSelectedRowindex = row.index
      this.putPlaintiffPerson = true
      this.plaintiffDialogFormVisible = true
      this.plaintiffCompanyVisiable = false
      this.plaintiffPersonVisiable = true
      this.plaintiffData = row
      this.defendantTitle = row.name
      this.dividerTitle = '个人'
    },
    // 被告单位列表单行点击事件
    defendantCompanyRowSelect (row, column, event) {
      this.rowSelected = true
      this.currentSelectedRowindex = row.index
      this.putDefendantPerson = false
      this.defendantDialogFormVisible = true
      this.defendantPersonVisiable = false
      this.defendantCompanyVisiable = true
      this.defendantData = row
      this.defendantTitle = row.name
      this.dividerTitle = '单位'
    },
    // 被告个人列表单行点击事件
    defendantPersonRowSelect (row, column, event) {
      this.rowSelected = true
      this.currentSelectedRowindex = row.index
      this.putDefendantPerson = true
      this.defendantDialogFormVisible = true
      this.defendantCompanyVisiable = false
      this.defendantPersonVisiable = true
      this.defendantData = row
      this.defendantTitle = row.name
      this.dividerTitle = '个人'
    },
    // 保存原告信息显示再列表 此时POST不请求接口 PUT直接请求
    plaintiffSave () {
      if (JSON.stringify(this.plaintiffData) === '{}') {
        this.$message({
          type: 'warning',
          message: '请填写相关表单内容'
        })
        return ''
      } else if (this.btnType !== 'put') {
        if (this.rowSelected) {
          this[this.plaintiffTableName].splice(this.currentSelectedRowindex, 1, this.plaintiffData) // 被告列表赋值
        } else {
          this[this.plaintiffTableName].push(this.plaintiffData)
        }
        this.defendantDialogCancel()
      } else { // 修改
        let arr = []
        if (this.putplaintiffPerson) { // 修改原告个人
          if (this.plaintiffData.id) { // 如果只是修改当前被告信息
            putPlaintiffPersonReq(this.plaintiffData).then(resp => {
              if (resp.code && resp.code === '200') {
                this.$message({
                  type: 'success',
                  message: '保存成功'
                })
                this.defendantDialogCancel()
              }
            })
          } else { // 如果修改案件时新加被告个人
            arr = []
            this.plaintiffData.caseId = this.caseData.id
            arr.push(this.plaintiffData)
            postPlaintiffPerson(JSON.stringify(arr)).then(resp => {
              if (resp.code && resp.code === '200') {
                this.$message({
                  type: 'success',
                  message: '保存成功'
                })
                if (this.rowSelected) {
                  this.plaintiffPersonTableData.splice(this.currentSelectedRowindex, 1, this.plaintiffData) // 被告列表赋值
                } else {
                  this.plaintiffPersonTableData.push(this.plaintiffData)
                }
                this.defendantDialogCancel()
              }
            })
          }
        } else { // 修改原告单位
          if (this.plaintiffData.id) {
            putPlaintiffCompany(this.plaintiffData).then(resp => {
              if (resp.code && resp.code === '200') {
                this.$message({
                  type: 'success',
                  message: '保存成功'
                })
                this.defendantDialogCancel()
              }
            })
          } else { // 如果新加原告单位
            arr = []
            this.plaintiffData.caseId = this.caseData.id
            arr.push(this.plaintiffData)
            postPlaintiffCompany(JSON.stringify(arr)).then(resp => {
              if (resp.code && resp.code === '200') {
                this.$message({
                  type: 'success',
                  message: '保存成功'
                })
                if (this.rowSelected) {
                  this.plaintiffCompanyTableData.splice(this.currentSelectedRowindex, 1, this.plaintiffData) // 被告列表赋值
                } else {
                  this.plaintiffCompanyTableData.push(this.plaintiffData)
                }
                this.defendantDialogCancel()
              }
            })
          }
        }
      }
    },
    // 保存被告信息显示再列表 此时POST不请求接口 PUT直接请求
    defendantSave () {
      if (JSON.stringify(this.defendantData) === '{}') {
        this.$message({
          type: 'warning',
          message: '请填写相关表单内容'
        })
        return ''
      } else if (this.btnType !== 'put') {
        if (this.rowSelected) {
          this[this.defendantTableName].splice(this.currentSelectedRowindex, 1, this.defendantData) // 被告列表赋值
        } else {
          this[this.defendantTableName].push(this.defendantData)
        }
        this.defendantDialogCancel()
      } else { // 修改
        let arr = []
        if (this.putDefendantPerson) {
          if (this.defendantData.id) { // 如果只是修改当前被告信息
            putDefendantPersonReq(this.defendantData).then(resp => {
              if (resp.code && resp.code === '200') {
                this.$message({
                  type: 'success',
                  message: '保存成功'
                })
                this.defendantDialogCancel()
              }
            })
          } else { // 如果修改案件时新加被告个人
            arr = []
            this.defendantData.caseId = this.caseData.id
            arr.push(this.defendantData)
            postDefendantPerson(JSON.stringify(arr)).then(resp => {
              if (resp.code && resp.code === '200') {
                this.$message({
                  type: 'success',
                  message: '保存成功'
                })
                if (this.rowSelected) {
                  this.defendantPersonTableData.splice(this.currentSelectedRowindex, 1, this.defendantData) // 被告列表赋值
                } else {
                  this.defendantPersonTableData.push(this.defendantData)
                }
                this.defendantDialogCancel()
              }
            })
          }
        } else {
          if (this.defendantData.id) {
            putDefendantUnit(this.defendantData).then(resp => {
              if (resp.code && resp.code === '200') {
                this.$message({
                  type: 'success',
                  message: '保存成功'
                })
                this.defendantDialogCancel()
              }
            })
          } else { // 如果新加被告单位
            arr = []
            this.defendantData.caseId = this.caseData.id
            arr.push(this.defendantData)
            createDefendantUnit(JSON.stringify(arr)).then(resp => {
              if (resp.code && resp.code === '200') {
                this.$message({
                  type: 'success',
                  message: '保存成功'
                })
                if (this.rowSelected) {
                  this.defendantCompanyTableData.splice(this.currentSelectedRowindex, 1, this.defendantData) // 被告列表赋值
                } else {
                  this.defendantCompanyTableData.push(this.defendantData)
                }
                this.defendantDialogCancel()
              }
            })
          }
        }
      }
    },
    // 总保存
    async save (handle) {
      if (handle === 'handle') {
        if (this.acceptApproval.file.length === 0 || this.chargeVoucher.file.length === 0) {
          this.$message({
            type: 'warning',
            message: '请上传受理审理与收费凭证'
          })
          return ''
        }
        this.filePost()
      } else {
        let lawCaseRes = await putLawCase(this.caseData).then(resp => {
          return resp
        })
        let clientRes = await putClient(this.clientData).then(resp => {
          return resp
        })
        if (lawCaseRes.code === '200' && clientRes.code === '200') {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
        }
      }
    },
    // 保存文件
    async filePost () {
      let acceptApprovalRes = null
      let chargeVoucher = null
      let caseId = this.caseData.id
      if (this.acceptApproval.file.length > 0) {
        let acceptApprovalArr = []
        let files = this.acceptApproval.file
        for (let i = 0, len = files.length; i < len; i++) {
          if (!files[i].id) {
            acceptApprovalArr.push({caseId: caseId, file: files[i].url})
          }
        }
        acceptApprovalRes = await postAcceptApproval(JSON.stringify(acceptApprovalArr)).then(resp => {
          return resp
        })
        if (!acceptApprovalRes || acceptApprovalRes.code !== '200') {
          this.$message.error('收案审理添加失败')
          return false
        }
      }
      // 保存收费凭证
      if (this.chargeVoucher.file.length > 0) {
        let chargeVoucherArr = []
        let files = this.chargeVoucher.file
        for (let i = 0, len = files.length; i < len; i++) {
          if (!files[i].id) {
            chargeVoucherArr.push({caseId: caseId, file: files[i].url})
          }
        }
        chargeVoucher = await postChargeVoucher(JSON.stringify(chargeVoucherArr)).then(resp => {
          return resp
        })
        if (chargeVoucher.code !== '200') {
          this.$message.error('收费凭证添加失败')
          return false
        } else {
          this.caseData.caseStatus = 2
          this.caseData.caseStatusTime = new Date().getTime()
          let lawCaseRes = await putLawCase(this.caseData).then(resp => {
            return resp
          })
          let clientRes = await putClient(this.clientData).then(resp => {
            return resp
          })
          if (lawCaseRes.code === '200' && clientRes.code === '200') {
            this.$message({
              type: 'success',
              message: '收案成功'
            })
            this.cancel()
            this.getTableData()
          } else {
            this.$message.error('收案失败: 表单数据提交有误')
          }
        }
      }
    },
    del (row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delLawCase(row.id).then(resp => {
          if (resp.code && resp.code === '200') {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.getTableData()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    btnClickCallback (callbackData) {
      this.btnType = callbackData.btnType
      if (callbackData.btnType === 'delete') {
        this.del(callbackData.rows[0])
      } else {
        this.showOnly = this.btnType === 'put'
        this.receiveShow = true
        this.dialogTitle = this.btnType === 'put' ? '修改案件' : '查看案件'
        let row = callbackData.rows[0]
        this.caseData = row
        getLawCaseDetail(row.id).then(resp => {
          if (resp.code && resp.code === '200') {
            let obj = {}
            obj = JSON.stringify(resp.data)
            this.caseData = JSON.parse(obj)
            this.clientData = JSON.parse(obj).lawClient
            let acceptApprovalArr = JSON.parse(obj).caseAcceptApprovalList
            if (acceptApprovalArr.length > 0) {
              this.acceptApproval.caseId = this.caseData.id
              for (let i = 0, len = acceptApprovalArr.length; i < len; i++) {
                acceptApprovalArr[i].url = acceptApprovalArr[i].file
                acceptApprovalArr[i].name = acceptApprovalArr[i].file
              }
              this.acceptApproval.file = acceptApprovalArr
            }
            let chargeVoucherArr = JSON.parse(obj).caseChargeVoucherList
            if (chargeVoucherArr.length > 0) {
              this.chargeVoucher.caseId = this.caseData.id
              for (let i = 0, len = chargeVoucherArr.length; i < len; i++) {
                chargeVoucherArr[i].url = chargeVoucherArr[i].file
                chargeVoucherArr[i].name = chargeVoucherArr[i].file
              }
              this.chargeVoucher.file = chargeVoucherArr
            }
            this.defendantCompanyTableData = JSON.parse(obj).caseDefendantUnitList
            this.defendantPersonTableData = JSON.parse(obj).caseDefendantPersonList
            this.plaintiffCompanyTableData = JSON.parse(obj).casePlaintiffUnitList
            this.plaintiffPersonTableData = JSON.parse(obj).casePlaintiffPersonList
          }
        })
        getUserList().then(resp => {
          if (resp.code && resp.code === '200') {
            this.lawyerList = resp.data
          }
        })
      }
      this.dialogFormVisible = callbackData.btnType !== 'delete'
    },
    // 去掉已上传文件
    delFile (data) {
      let type = data.type
      let file = data.file
      if (file.id && this.btnType === 'put') {
        this.$confirm('此操作成功将不可恢复, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if (type === 'acceptApproval') {
            delAcceptApproval(file.id).then(resp => {
              if (resp.code && resp.code === '200') {
                this.$message({
                  type: 'success',
                  message: '操作成功'
                })
              }
            })
          } else {
            delChargeVoucher(file.id).then(resp => {
              if (resp.code && resp.code === '200') {
                this.$message({
                  type: 'success',
                  message: '操作成功'
                })
              }
            })
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    getTableData () {
      getLawCase(this.queryData).then(resp => {
        if (resp.code && resp.code === '200') {
          this.pageData = resp.data
          this.pageData.isExpire = true
        }
      })
    },
    handleCheckedRows (rows) {
      if (rows && rows instanceof Array && rows.length > 0) {
        this.currentSelectedData = rows
      } else {
        this.currentSelectedData = []
      }
    },
    handleCurrentChange (val) {
      this.queryData.offset = (val - 1) * 10
      this.getTableData()
    },
    searchHandleClick () {
      this.queryData.offset = 0
      this.getTableData()
    },
    defendantDialogCancel () {
      this.rowSelected = false
      this.defendantData = {}
      this.plaintiffData = {}
      this.plaintiffDialogFormVisible = false
      this.defendantDialogFormVisible = false
    },
    cancel () {
      this.caseData = {}
      this.clientData = {}
      this.chargeVoucher = {file: []}
      this.plaintiffData = {}
      this.acceptApproval = {file: []}
      this.defendantPersonTableData = []
      this.defendantCompanyTableData = []
      this.dialogFormVisible = false
    },
    // 时间戳转日期格式
    formatDate (row, column) {
      let dt = row.createTime
      if (!dt || isNaN(parseInt(dt))) return ''
      let date = new Date(parseInt(dt))
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? ('0' + MM) : MM
      let d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      return y + '-' + MM + '-' + d
    }
  }
}
</script>
<style scoped>
  .containerWrap {
    padding:10px;
    height: 100%;
    box-sizing: border-box
  }
  .container {
    height: 100%;
  }
</style>
